<template>
  <div class="header">
 	  <div class="header-left">
 		  <div class="iconfont back-icon">&#xe658;</div>

 	  </div>
 	  <div class="header-input">
 		  <span class="iconfont">&#xe63c;</span>输入城市/景点/游玩主题
    </div>
    <router-link to='/city'>
   	  <div class="header-right arrow-icon">
 <!-- this.$store.state.city  -->      
        {{this.city}}<span class="iconfont arrow-icon">&#xe65c;</span>
        <!-- this.doubleCity -->
      </div>
    </router-link>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
    name:'HomeHeader',
    computed: {
      ...mapState(['city'])
      //...mapGetters(['doubleCity'])
    }
  }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .header
     display:flex
     line-height:$headerHeight
     background:$bgColor
     color:#fff
     .header-left
        width: .64rem
        float:left
        .back-icon
         text-align:center
         font-size: .4rem
     .header-input
      flex:1
      height:.64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background:#fff
      border-radius: .1rem
      color:#ccc
     .header-right
       min-width:1.04rem
       padding: 0.1rem
       float: right
       text-align: center
       color: #fff
       .arrow-icon
         margin-left: -.04rem
         font-size: .24rem
</style>